export var colorList = [
  {
    type: "linear",
    x: 0,
    y: 0,
    x2: 1,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: "rgba(51,192,205,0.01)", // 0% 处的颜色
      },
      {
        offset: 1,
        color: "rgba(51,192,205,0.57)", // 100% 处的颜色
      },
    ],
    globalCoord: false, // 缺省为 false
  },
  {
    type: "linear",
    x: 1,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: "rgba(115,172,255,0.02)", // 0% 处的颜色
      },
      {
        offset: 1,
        color: "rgba(115,172,255,0.67)", // 100% 处的颜色
      },
    ],
    globalCoord: false, // 缺省为 false
  },
  {
    type: "linear",
    x: 1,
    y: 0,
    x2: 0,
    y2: 0,
    colorStops: [
      {
        offset: 0,
        color: "rgba(158,135,255,0.02)", // 0% 处的颜色
      },
      {
        offset: 1,
        color: "rgba(158,135,255,0.57)", // 100% 处的颜色
      },
    ],
    globalCoord: false, // 缺省为 false
  },
  {
    type: "linear",
    x: 0,
    y: 1,
    x2: 0,
    y2: 0,
    colorStops: [
      {
        offset: 0,
        color: "rgba(252,75,75,0.01)", // 0% 处的颜色
      },
      {
        offset: 1,
        color: "rgba(252,75,75,0.57)", // 100% 处的颜色
      },
    ],
    globalCoord: false, // 缺省为 false
  },
  {
    type: "linear",
    x: 1,
    y: 1,
    x2: 1,
    y2: 0,
    colorStops: [
      {
        offset: 0,
        color: "rgba(253,138,106,0.01)", // 0% 处的颜色
      },
      {
        offset: 1,
        color: "#FDB36ac2", // 100% 处的颜色
      },
    ],
    globalCoord: false, // 缺省为 false
  },
  {
    type: "linear",
    x: 0,
    y: 0,
    x2: 1,
    y2: 0,
    colorStops: [
      {
        offset: 0,
        color: "rgba(254,206,67,0.12)", // 0% 处的颜色
      },
      {
        offset: 1,
        color: "#FECE4391", // 100% 处的颜色
      },
    ],
    globalCoord: false, // 缺省为 false
  },
];
export var colorLine = [
  "#33C0CD",
  "#73ACFF",
  "#9E87FF",
  "#FE6969",
  "#FDB36A",
  "#FECE43",
];

function getRich() {
  let result = {};
  colorLine.forEach((v, i) => {
    result[`hr${i}`] = {
      backgroundColor: colorLine[i],
      borderRadius: 3,
      width: 3,
      height: 3,
      padding: [3, 3, 0, -12],
    };
    result[`a${i}`] = {
      padding: [-11, 6, -20, 6],
      color: colorLine[i],
      backgroundColor: "transparent",
      fontSize: 12,
    };
  });
  return result;
}

var option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    }
  },
  series: [
    {
      type: "pie",
      radius: "60%",
      center: ["50%", "50%"],
      clockwise: true,
      label: {
        show: true,
        position: "outside",
        formatter: function (params) {
          const name = params.name;
          const value = params.value;
          const index = params.dataIndex;
          return [`{a${index}|${name}：${value}}`, `{hr${index}|}`].join(
            "\n"
          );
        },
        rich: getRich(),
      },
      itemStyle: {
        normal: {
          color: function (params) {
            return colorList[params.dataIndex];
          },
        },
      },
      data:[],
      roseType: "radius",
    },
  ],
};


export default option;
